/**
 * icon需要按需引入，同时能保持shakable
 */
import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
import { memo } from 'react';

// 1. 需要的icon在这里引入，以支持按需加载, 图标选择: https://ant.design/components/icon-cn/
import { HomeOutlined, TableOutlined, ClockCircleOutlined, DownOutlined } from '@ant-design/icons';

// 2. 配置映射
const IconMap = {
  homeOutlined: HomeOutlined,
  tableOutlined: TableOutlined,
  clockCircleOutlined: ClockCircleOutlined,
  downOutlined: DownOutlined,
} as const;

// icon key 的索引
export type IconKeyType = keyof typeof IconMap;
export const IconKeys: Record<IconKeyType, IconKeyType> = (
  Object.keys(IconMap) as IconKeyType[]
).reduce((prev, key) => {
  // eslint-disable-next-line no-param-reassign
  prev[key] = key;
  return prev;
}, {} as Record<IconKeyType, IconKeyType>);

export interface IconCompProps extends Partial<CustomIconComponentProps> {
  iconKey: IconKeyType;
}

export const IconComp = memo<IconCompProps>(({ iconKey, ...rest }) => {
  const FindIcon = IconMap[iconKey];
  return <FindIcon {...rest} />;
});
